<template>
    <div class="exchange">
        <div class="top-title">
            <img src="../../images/common/icon-back.png" @click="goback">
            <p class="tc">实物卡兑换</p>
        </div>
        <div class="content-top">
            <div class="bgc"></div>
            <div class="form">
                <p class="title">填写信息</p>
                <input type="text" placeholder="请输入卡号">
                <input type="password" placeholder="请输入密码">
                <p class="button">立即兑换</p>
            </div>
        </div>
        
        <div class="content-bottom">
            <div class="bottom-title">兑换记录</div>
            <div class="exchange-record">
                 <ul>
                     <li class="fx-spb">
                        <img src="../../images/index/icon-exchange.png">
                        <div>
                            <p>卡号253465480兑换成功</p>
                            <span>2018年6月29日-2019年7月29日</span>
                        </div>
                     </li>
                     <li class="fx-spb">
                        <img src="../../images/index/icon-exchange.png">
                        <div>
                            <p>卡号253465480兑换成功</p>
                            <span>2018年6月29日-2019年7月29日</span>
                        </div>
                     </li>
                     <li class="fx-spb">
                        <img src="../../images/index/icon-exchange.png">
                        <div>
                            <p>卡号253465480兑换成功</p>
                            <span>2018年6月29日-2019年7月29日</span>
                        </div>
                     </li>
                     <li class="fx-spb">
                        <img src="../../images/index/icon-exchange.png">
                        <div>
                            <p>卡号253465480兑换成功</p>
                            <span>2018年6月29日-2019年7月29日</span>
                        </div>
                     </li>
                 </ul>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() { 
        return {

        }
    },
    methods: {
        goback(){
            this.$router.go(-1);
        }
    }
 }
</script>

<style lang="scss" scoped>
.exchange{
    .content-top{
        height: 6.94rem;
        position: relative;
        .bgc{
            width: 100%;
            height: 4.64rem;
            margin-top: 1rem;
            background: linear-gradient(to right,#39BFB3,#76E6DC);
        }
        .form{
            width: 90%;
            height: 5.4rem;
            background-color:#fff;
            position: absolute;
            left: 50%;
            top: 20%;
            transform: translateX(-50%);
            z-index: 10;
            padding: 0.4rem 0.6rem 0 0.6rem;
            border-radius: 0.16rem;
            box-shadow: 2px 0px 5px #F6F6F6,  /*右边阴影*/ 
                        0px 15px 15px #F6F6F6; /*下边阴影*/
            .title{
                font-size: 0.36rem;
                letter-spacing: 0.04rem;
            }
            input{
                height: 0.9rem;
                width: 100%;
                background-color: #f6f6f6;
                border-radius: 3px;
                padding-left: 0.4rem;
            }
            .button{
                width: 70%;
                height: 0.84rem;
                line-height: 0.84rem;
                text-align: center;
                border-radius: 0.4rem;
                background: linear-gradient(to right,#39BFB3,#76E6DC);
                color: #fff;
                letter-spacing: 0.08rem;
                margin: 0.4rem auto;
            }
        }
    }
    .content-bottom{
        margin-top: 0.6rem;
        .bottom-title{
            height: 0.8rem;
            line-height: 0.8rem;
            font-size: 0.28rem;
            padding-left: 0.6rem;
            border-bottom: 1px solid #f0f0f0;
        }
        .exchange-record{
            padding-left: 0.6rem;
            li{
                height: 1.6rem;
                align-items: center;
                img{
                    height: 0.88rem;
                    width: 0.88rem;
                }
                div{
                    width: 80%;
                    height: 100%;
                    padding: 0.3rem 0;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    border-bottom: 1px solid #f0f0f0;
                    p{
                        letter-spacing: 1px;
                    }
                    span{
                        font-size: 0.26rem;
                        color: #b5b5b5;
                    }
                }
            }
        }
    }
}
</style>